let smallBox = document.querySelector('.smallBox')
console.log(smallBox); //左边小盒子
let span = document.querySelector('span') //过滤层盒子
let bigBox = document.querySelector('.bigBox') //右边大盒子
let rimg = document.querySelector('.rimg') //右边大盒子图片
let ht = document.querySelector('.ht') //右边大盒子
$.get('../data/goods.json', 'json').then(function (res) {
    res = res.slice(0, 40)
    console.log(res)
    smallBox.firstElementChild.src = res[0].img_small_logo
    ht.firstElementChild.firstElementChild.src = res[0].img_small_logo
    bigBox.firstElementChild.src = res[0].img_small_logo
    ht.firstElementChild.nextElementSibling.firstElementChild.src = '../img/dl.webp'
    ht.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.src = '../img/zc.webp'
})



smallBox.onmouseover = function () { //绑定鼠标移入事件，移入的时候遮罩，大盒子显示

    span.style.display = 'block'
    bigBox.style.display = 'block'
    smallBox.onmousemove = function (e) { //左边盒子绑定鼠标移动事件
        e = e || window.event
        let x = e.offsetX - span.offsetWidth / 2 //减去遮罩宽高的一半，让鼠标在遮罩中间
        let y = e.offsetY - span.offsetHeight / 2
        x < 0 ? x = 0 : x //边界判定
        x > 400 - span.offsetWidth ? x = 400 - span.offsetWidth : x
        y < 0 ? y = 0 : y
        y > 400 - span.offsetHeight ? y = 400 - span.offsetHeight : y
        span.style.top = y + 'px'
        span.style.left = x + 'px'
        let w = x / (400 - span.offsetWidth) //定义变量，计算移动距离x和总的可移动距离的比值
        let h = y / (400 - span.offsetHeight)
        //赋值给照片定位值，比例乘以可移动最大距离就是图片移动距离
        rimg.style.top = -h * (rimg.offsetHeight - bigBox.offsetHeight) + 'px'
        rimg.style.left = -w * (rimg.offsetWidth - bigBox.offsetWidth) + 'px'
    }

}

smallBox.onmouseout = function () {
    span.style.display = 'none'
    bigBox.style.display = 'none'


}
ht.addEventListener('click', function (e) {
    e = e || window.event
    let target = e.target || e.srcElement
    rimg.src = target.src
    smallBox.firstElementChild.src = target.src
    let hes = document.querySelectorAll('.he')
    for (let i = 0; i < hes.length; i++) {
        hes[i].style.border = '1px solid transparent'
    }
    target.parentElement.style.border = '1px solid red'




})